﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友情链接 - 社交平台</title>

    @include("frontend/bootstrap/common/css")
    <style>

        .container {
            max-width: 1200px;
        }

        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }

        .page-description {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }

        .link-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 3rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
        }
    </style>

</head>
<body>
<div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">友情链接</h1>
        <p class="page-description">
            以下是我们的合作伙伴和推荐网站，欢迎访问交流
        </p>
    </div>

    <!-- 网格布局链接 -->
    <section class="link-section">
        <h2 class="section-title">
            <i class="fas fa-th-large"></i> 精选合作伙伴
        </h2>

        @include("frontend/bootstrap/common/links1")
    </section>

    <!-- 分类链接 -->
    <section class="link-section">
        <h2 class="section-title">
            <i class="fas fa-list-alt"></i> 分类链接导航
        </h2>

        @include("frontend/bootstrap/common/links2")
    </section>

    <!-- 图标链接 -->
    <section class="link-section">
        <h2 class="section-title">
            <i class="fas fa-icons"></i> 特色站点推荐
        </h2>

        @include("frontend/bootstrap/common/links3")
    </section>

    <!-- 申请友情链接 -->
@include("frontend/bootstrap/common/links4")


    <!-- 图文友情链接 -->
    <div class="link-section">
        <h2 class="section-title">
            <i class="fas fa-image"></i> 图文友情链接
        </h2>

        @include("frontend/bootstrap/common/links5")
    </div>

    <!-- 图文友情链接 -->
    <div class="link-section">
        <div class="section-header">
            <h2 class="section-title"><i class="fas fa-image"></i> 图文友情链接</h2>
            <p class="section-desc">包含图片和详细描述的合作伙伴链接，展示更丰富的信息</p>
        </div>

        @include("frontend/bootstrap/common/links6")
    </div>

    <!-- 文字友情链接 -->
    <div class="link-section">
        <div class="section-header">
            <h2 class="section-title"><i class="fas fa-font"></i> 文字友情链接</h2>
            <p class="section-desc">简洁的文字链接形式，快速访问各合作伙伴网站</p>
        </div>

        @include("frontend/bootstrap/common/links7")
    </div>

    <!-- Logo友情链接 -->
    <div class="link-section">
        <div class="section-header">
            <h2 class="section-title"><i class="fas fa-th"></i> Logo友情链接</h2>
            <p class="section-desc">以品牌Logo展示的合作伙伴，直观呈现合作关系</p>
        </div>

        @include("frontend/bootstrap/common/links7")
    </div>


</div>

<!-- 申请链接模态框 -->
<div class="modal fade" id="applyModal" tabindex="-1" aria-labelledby="applyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="applyModalLabel">友情链接申请</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="linkApplyForm">
                    <div class="mb-3">
                        <label for="siteName" class="form-label">网站名称</label>
                        <input type="text" class="form-control" id="siteName" placeholder="请输入您的网站名称" required>
                    </div>
                    <div class="mb-3">
                        <label for="siteUrl" class="form-label">网站URL</label>
                        <input type="url" class="form-control" id="siteUrl" placeholder="请输入您的网站地址，以http://或https://开头"
                               required>
                    </div>
                    <div class="mb-3">
                        <label for="siteCategory" class="form-label">网站分类</label>
                        <select class="form-select" id="siteCategory" required>
                            <option value="">请选择网站分类</option>
                            <option value="tech">科技类</option>
                            <option value="design">设计类</option>
                            <option value="life">生活类</option>
                            <option value="business">商业类</option>
                            <option value="education">教育类</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="siteDesc" class="form-label">网站描述</label>
                        <textarea class="form-control" id="siteDesc" rows="2" placeholder="请简要描述您的网站"
                                  required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="contactName" class="form-label">联系人</label>
                        <input type="text" class="form-control" id="contactName" placeholder="请输入您的姓名" required>
                    </div>
                    <div class="mb-3">
                        <label for="contactEmail" class="form-label">联系邮箱</label>
                        <input type="email" class="form-control" id="contactEmail" placeholder="请输入您的邮箱地址" required>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="agreementCheck" required>
                        <label class="form-check-label" for="agreementCheck">
                            我已在我的网站添加了贵站的链接，且保证所提供的信息真实有效
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitApply">提交申请</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
	// 友情链接申请表单处理
	document.getElementById('submitApply').addEventListener('click', function () {
	});

</script>
</body>
</html>

